<template>
	<div :class="['ph-drowdown',theme?'ph-drowdown-'+theme:'']" v-och="visible" @mouseenter="onEnter" @mouseleave="onLeave">
		<ph-button 
			v-if="simple"
			class="ph-drowdown-handle"
			:disabled="disabled"
			:type="type"
			:icon="icon||'caret-down'"
			:shape="shape"
			@click="onClick">{{title}}</ph-button>
		<ph-button 
			v-else
			:disabled="disabled"
			class="ph-drowdown-handle"
			:iconRight="showRightIcon?'caret-down':''"
			:type="type"
			:icon="icon"
			:iconRightFixed="true"
			:shape="shape"
			@click="onClick">{{title}}</ph-button>
		<transition name="ph-upbit">
			<div v-show="!disabled&&visible" :style="style" ref="edropdown" class="ph-drowdown-list">
				<slot></slot>
			</div>
		</transition>
	</div>
</template>
<script lang="ts">
    import { defineComponent ,computed, ref, provide, toRef, unref, PropType, reactive, nextTick } from 'vue'
	import { PhButton } from '../base'
	import { och } from '../../directives'
	import { supportTouch } from 'ph-util'
	import getPosition from '@/shared/get-position'
	export default defineComponent({
		directives:{
			och
		},
		props:{
			shape:String,
			theme:{
				type:String,
				default:"light"
			},
			showRightIcon:{type:Boolean,default:true},
			simple:Boolean,
			disabled:Boolean,
			type:{
				type:String
			},
			hover:{
				type:Boolean,
				default:false
			},
			title:{
				type:String,
				default:" "
			},
			align:{
				type:String //文本左右对齐 <left|null->center|right>
			},
			icon:{
				type:String
			},
			multiple:{
				type:Boolean
			},
			checkActions:{
				type:Array as PropType<Array<string>>,
				default:()=>[]
			}
		},
        setup(props,{emit}){
			const visible = ref(false)
			const edropdown = ref<HTMLElement>()
			const style = reactive({
				left:"0",
				top:"0"
			})
			const hover = computed(()=>{
				return props.hover&&!supportTouch()
			})
			const cacheCheckes = ref<Array<string>>(props.checkActions)
			provide('hide',()=>{
				visible.value = false
			})
			provide('multiple',toRef(props,'multiple'))
			provide('align',toRef(props,'align'))
			provide('cacheCheckes',cacheCheckes)
			provide('dropdownAction',(action:string,checked?:boolean)=>{
				if(props.multiple){
					if(checked)cacheCheckes.value.push(action)
					else cacheCheckes.value = cacheCheckes.value.filter(k=>k!=action)
					emit('action',unref(cacheCheckes))
				}
				else
					emit('action',action)
			})
			const rePosition = ()=>{
				nextTick(()=>{
					const {x,y} = getPosition(edropdown.value as HTMLElement)
					style.left = x+"px"
					style.top = y+"px"
				})
			}
			const onEnter = ()=>{
				if(!props.hover)return
				visible.value = true
				rePosition()
			}
			const onLeave = ()=>{
				if(props.hover)
				visible.value = false
			}
			const onClick = ()=>{
				if(hover.value)return
				visible.value = !visible.value
				if(visible.value)
					rePosition()
			}

			
            return {visible,style,edropdown,onEnter,onClick,onLeave}
        },
		components:{PhButton}
	})
</script>
<style lang="scss">
	.ph-drowdown{
		display: inline-block;
		position: relative;
		overflow:visible;
		flex: 0 0 auto;
		font-size:var(--phx);
		.ph-drowdown-handle:not(.ph-action-square){
			position:relative;
			display: block;
			width: 100%;
			padding-right:  var(--ph-20);
		}
		.ph-drowdown-list{
            position:absolute;
			top: 0;
			min-width: 100%;
			max-height: calc(var(--phx) * 20);
			overflow: auto;
			box-shadow:0px 1px var(--ph-10) rgb(0 0 0 / 20%);
			white-space:normal;
		}
		&-dark{
			--ph-dd-bg: var(--ph-dark);
			--ph-dd-color: var(--ph-c-disabled);
			--ph-dd-bg-hover: var(--ph-dark-d1);
			--ph-dd-color-hover: var(--ph-c-light);
		}
		&-light{
			--ph-dd-bg: var(--ph-light-light);
			--ph-dd-color: var(--ph-c);
			--ph-dd-bg-hover: var(--ph-light-l1);
			--ph-dd-color-hover: var(--ph-c-d1);
		}
	}
</style>